<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
  <div id="app"></div>
  <script src="js/jquery.min.js"></script>
  <script type="text/html" id="tpl">
    <div class="box">
      <h1>{{title}}</h1>
      <p>{{content}}</p>
    </div>
  </script>
  <script type="text/javascript">
    var oApp = document.querySelector('#app')
    var oTpl = document.querySelector('#tpl').innerHTML
    oApp.innerHTML = oTpl.replace(/{{(.*?)}}/g, function(node,key){
      // node ==>{{title}}   key ==> title
      return {
        title:"小米官网",
        content:"please buy"
      }[key]
    })
  </script>
</body>
</html>